<template>
    <div class="page sign-ui">
        <div class="head-box">
            <div class="sign-icon">
                <img src="./img/date.png">
                <p>每日签到</p>
            </div>
            <span>(连续七天奖励50积分)</span>
        </div>
        <div class="table-box" v-for="(tab,index) in table" :key="index" :style="{'background': index < continuousDays ? '#42A7BD':''}">
            <p :style="{'color': index < continuousDays ? '#FFF':''}">{{tab.day}}</p>
            <P :style="{'color': index < continuousDays ? '#FFF':''}">{{tab.award}}</P>
        </div>
        <cube-button @click="submitTap()">签到</cube-button>
        <div class="invite-box">
            <img src="./img/invite.png">
            <p>邀请加入<span>(邀请注册成功可奖励50积分)</span></p>
        </div>
        <div class="qrcode-box">
            <p>二维码分享</p>
            <img src="./img/qrcode.png">
        </div>
        <div class="qrcode-box">
            <p>邀请码</p>
            <p>Y978G</p>
            <span>长按可复制</span>
        </div>
    </div>
</template>
<script>
    import { getSignDay, signPost } from '../../api/sign'
    export default {
        created() {
            getSignDay().then(res=> {
                console.log(res)
                this.continuousDays = res.data.continuousDays
                this.lastTime = res.data.lastTime
            })
        },
        methods: {
            //用户签到，成功签到天数加1  continuousDays+1
            submitTap: function () {
                signPost().then(res=> {

                })
            }
        },
        data() {
            return {
                lastTime: null,
                continuousDays: 0,
                table: [
                    {
                        day: "第一天",
                        award: "5",
                    },
                    {
                        day: "第二天",
                        award: "10",
                    },
                    {
                        day: "第三天",
                        award: "15",
                    },
                    {
                        day: "第四天",
                        award: "20",
                    },
                    {
                        day: "第五天",
                        award: "25",
                    },
                    {
                        day: "第六天",
                        award: "30",
                    },
                    {
                        day: "第七天",
                        award: "35",
                    }
                ]
            }
        }
    }
</script>
<style type="text/stylus" lang="stylus">
    .sign-ui
        .cube-btn
            width 24%
            height 0.85rem
            background #42A7BD
            text-align center
            line-height 0.85rem
            padding 0
            color #FFF
            margin 0.53rem auto
</style>
<style scoped type="text/stylus" lang="stylus">
    .page
        width 92%
        padding 0 4%
        height 100%
        background #FFF
        padding-bottom 1.3rem
        .head-box
            width 100%
            height 0.97rem
            padding 0.53rem 0 0.37rem 0
            .sign-icon
                display flex
                justify-content start
                align-items center
                img
                    width 0.43rem
                    height 0.43rem
                p
                    color #327A8A
                    font-size 0.4rem
                    margin-left 0.32rem
                    font-weight 500
            span
                color #BBBBBB
                font-size 0.32rem
        .table-box
            width 90%
            padding 0 5%
            height 1.17rem
            border 1px #eee solid
            display flex
            justify-content space-between
            align-items center
            p
                font-size 0.4rem
        .invite-box
            display flex
            justify-content start
            align-items center
            img
                width 0.45rem
                height 0.45rem
            p
                font-size 0.4rem
                color #327A8A
                margin-left 0.33rem
            span
                color #BBBBBB
                font-size 0.32rem
                margin-left 0.16rem
        .qrcode-box
            width 92%
            padding 0 4%
            height 0.85rem
            border 1px #eee solid
            border-radius 4px
            margin-top 0.27rem
            display flex
            justify-content space-between
            align-items center
            p
                font-size 0.4rem
                color #327A8A
                font-weight bold
            img
                width 0.37rem
                height 0.37rem
            span
                color #BBBBBB
                font-size 0.32rem
</style>
